
| 参数            | 说明         | 类型     | 默认     | 可选值             |
| ------------- | ----------    | ------- | --------- | --------------- |
| formList      | form配置列表   | Object  | []        |                 |
| inline        | form表单排列方式 | Boolean| false(竖排) | true,false      |
| rules         | form校验规则   | Object  | []        |                 |
| labelPosition | label位置       | String | right     | right,left, top |
| buttonText    | 按钮名         |         | 提交       |                 |
|               |               |         |           |                 |
|               |               |         |           |                 |

formList配置

| 参数           | 说明                       | 可选值                                    |
| ------------ | ------------------------     | ---------------------------------------- |
| name         | 参数名                      |                                          |
| label        | label名                     |                                          |
| formType     | form类别                     | input, inputNumber, radio, checkbox, select, switch, timePicker, DataPicker |
| defaultValue | 表单默认值                    | ’‘，[]                                    |
| placeholder  |                              |                                          |
| options      | 单选框、多选框、select多选的options | {key:'',value:'展示的值'}             |
| optionMap    | options的字段映射              | { key: "", value: "options的参数" }        |
| isRange      | 时间选择框是否双段                | false,true                              |
|              |                                  |                                          |


<template>
  <div class="form-list">
    <el-form
      :model="formData"
      ref="dynamicValidateForm"
      label-width="100px"
      class="demo-dynamic"
      :inline="inline"
      :rules="rules"
      :label-position="labelPosition"
    >
      <el-form-item
        v-for="(item, index) in formList"
        :label="item.label"
        :key="index"
        :prop="item.name"
      >
        <!-- input输入框 -->
        <el-input
          v-if="item.formType == 'input'"
          :placeholder="item.placeholder || '请输入'"
          v-model="formData[item.name]"
        ></el-input>

        <!-- inputNumber输入框 -->
        <el-input-number
          v-if="item.formType == 'inputNumber'"
          :placeholder="item.placeholder || '请输入'"
          v-model="formData[item.name]"
          :min="1"
          :max="10"
        ></el-input-number>
        <!-- 单选框 -->
        <el-radio-group
          v-if="item.formType == 'radio'"
          v-model="formData[item.name]"
        >
          <el-radio
            v-for="(i, index) in item.options"
            :key="index"
            :label="i[item.optionMap.key || 'key']"
            >{{ i[item.optionMap.value || "value"] }}</el-radio
          >
        </el-radio-group>
        <!-- 多选框 -->
        <el-checkbox-group
          v-if="item.formType == 'checkbox'"
          v-model="formData[item.name]"
        >
          <el-checkbox
            v-for="(i, index) in item.options"
            :key="index"
            :label="i[item.optionMap.key || 'key']"
          ></el-checkbox>
        </el-checkbox-group>
        <!-- select选择器 -->
        <el-select
          v-if="item.formType == 'select'"
          v-model="formData[item.name]"
          :placeholder="item.placeholder || '请选择'"
          filterable
        >
          <el-option
            v-for="i in item.options"
            :key="i[item.optionMap.key || 'key']"
            :label="i[item.optionMap.value || 'value']"
            :value="i[item.optionMap.key || 'key']"
          >
          </el-option>
        </el-select>
        <!-- switch开关 -->
        <el-switch
          style="display: block"
          v-if="item.formType == 'switch'"
          v-model="formData[item.name]"
        >
        </el-switch>
        <!-- 时间选择器 -->
        <el-time-picker
          v-if="item.formType == 'timePicker'"
          :is-range="item.isRange"
          v-model="formData[item.name]"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        >
        </el-time-picker>

        <!-- 日期选择器 -->
        <el-date-picker
          v-if="item.formType == 'DataPicker'"
          v-model="formData[item.name]"
          :type="item.type || 'day'"
          placeholder="选择日期"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button @click="handleSubmitBtn" type="primary">{{
          buttonText
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { onMounted, ref, defineProps, watch } from "vue";
const emit = defineEmits(["handleSubmit"]);

const props = defineProps({
  formList: {
    type: Array,
    default: [],
  },
  inline: {
    type: Boolean,
    default: false,
  },
  rules: {
    type: Object,
    default: {},
  },
  labelPosition: {
    type: String,
    default: "right",
  },
  buttonText: {
    type: String,
    default: "检索",
  },
});

const formData = ref({});
const dynamicValidateForm = ref();
onMounted(() => {
  if (props.formList.length) {
    let _form = {};
    props.formList.forEach((item) => {
      _form[item.name] =
        item.defaultValue || item.formType == "checkbox" ? [] : "";
    });
    formData.value = _form;
    console.log(formData.value);
  }
});
const handleSubmitBtn = () => {
  dynamicValidateForm.value.validate((valid)=>{
    if(valid){
      emit('handleSubmit',formData.value)
    }
  })
};
</script>

<style lang="scss">
.form-list {
  .el-input {
    width: 200px;
  }
}
</style>
